<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- https://www.babeljs.cn/ -->
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // JSX   JavaScript XML 是 react 引入的一种特殊的语法. 浏览器默认是无法解析的. 
      // JSX 是 React.createElement 的语法糖, 快速创建虚拟 DOM 对象
      // let h1 = <h1>你好</h1>;
      let div = <div title="插队有理?">
          <h1>近日浙江发生了一起骇人听闻的插队事件</h1>
          <p>
            一男子在排队时, 有一对母女强行插队, 恶言相告, 你凭什么拉我? 我不是那么好惹的!!
            <a href="http://www.baidu.com/s?wd=插队母女">点击查看更多</a>
          </p>
        </div>;

      //渲染
      ReactDOM.render(div, document.querySelector('#root'));
    </script>
  </body>
</html>
